<template>
  <div class="jaguar-view">
    <div class="jaguar-search">
      <el-form :inline="true" :model="searchForm" @submit.prevent>
        <search-input
          label="用户信息"
          v-model="searchForm.fuzzyUserInfo"
          :search="getData"
        />
        <search-select
          label="是否启用"
          v-model="searchForm.userEnable"
          dicKey="isEnable"
          :search="getData"
        />
        <search-select
          label="是否锁定"
          v-model="searchForm.userLocked"
          :dics="[
            { label: '正常', value: false },
            { label: '锁定', value: true },
          ]"
          :search="getData"
        />
        <el-form-item label="用户部门">
          <dept-tree-select
            v-model="searchForm.userDeptIds"
            multiple
            placeholder="请选择用户部门"
            @change="getData(1)"
          />
        </el-form-item>

        <el-form-item>
          <search-button :search="getData" />
          <reset-button :search-form="searchForm" :search="getData" />
        </el-form-item>
      </el-form>
    </div>

    <div class="jaguar-control">
      <add-button @click="handleCreate" />

      <el-button type="primary" icon="edit" @click="handleBatchEdit">
        批量编辑
      </el-button>
    </div>

    <el-card class="jaguar-table">
      <el-table
        ref="table"
        :data="tableData"
        v-loading="loading"
        table-layout="auto"
      >
        <el-table-column type="selection" />
        <el-table-column prop="userAccount" label="用户账号">
          <template #default="scope">
            {{ scope.row.userAccount }}
            <span v-if="scope.row.userLocked" style="color: red">
              （已锁定）
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="userPhone" label="用户手机号" />
        <el-table-column prop="userEmail" label="用户邮箱" />
        <el-table-column prop="userNickName" label="用户昵称" />
        <el-table-column label="用户角色">
          <template #default="scope">
            <template v-if="scope.row.roleNames">
              <el-tag
                v-for="roleName in scope.row.roleNames.split(',')"
                :key="roleName"
                effect="plain"
              >
                {{ roleName }}
              </el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="dept.deptName" label="用户部门">
          <template #default="scope">
            <el-tag
              v-if="scope.row.userDeptId == 0"
              type="danger"
              effect="plain"
              >根部门</el-tag
            >
            <el-tag v-else-if="scope.row.deptName" effect="plain">
              {{ scope.row.deptName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="userEnable" label="用户是否启用">
          <template #default="scope">
            <el-switch v-model="scope.row.userEnable" disabled />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220">
          <template #default="scope">
            <view-button @click="handleView(scope.row)" />
            <edit-button @click="handleEdit(scope.row)" />
            <delete-button
              v-if="!scope.row.userBuiltIn"
              @confirm="
                ({ instance, done }) =>
                  handleDelete(scope.row, { instance, done })
              "
            />
          </template>
        </el-table-column>
      </el-table>

      <table-page :page="page" :search="getData" />
    </el-card>

    <Edit :dialog="dialog" @success="getData" />

    <batch-edit :dialog="batchEditDialog" @success="getData" />
  </div>
</template>
<script>
import { fetchList, del } from '@/api/upms/user'
import Edit from './Edit'
import BatchEdit from './BatchEdit'

export default {
  name: 'User',
  data() {
    return {
      loading: false,
      tableData: [],
      searchForm: {},
      page: {
        total: 0,
        current: 1,
        size: 10,
      },
      dialog: {
        entity: null,
        operation: null,
        visible: false,
      },
      batchEditDialog: {
        userIds: null,
        visible: false,
      },
    }
  },
  components: {
    Edit,
    BatchEdit,
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData(current, size) {
      if (current) this.page.current = current
      if (size) this.page.size = size

      this.loading = true
      fetchList(
        Object.assign(
          {
            'orders[0].asc': false,
            'orders[0].column': 'id_',
            current: this.page.current,
            size: this.page.size,
          },
          this.searchForm
        )
      )
        .then((res) => {
          this.tableData = res.data.data.records
          this.page.total = res.data.data.total
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleCreate() {
      this.dialog.entity = null
      this.dialog.operation = 1
      this.dialog.visible = true
    },
    handleEdit(row) {
      this.dialog.entity = row
      this.dialog.operation = 2
      this.dialog.visible = true
    },
    handleView(row) {
      this.dialog.entity = row
      this.dialog.operation = 3
      this.dialog.visible = true
    },
    handleDelete(row, { instance, done }) {
      del(row.id)
        .then(() => {
          done()
          this.$message.success('删除成功')
          this.getData()
        })
        .finally(() => {
          instance.confirmButtonLoading = false
        })
    },
    handleBatchEdit() {
      let rows = this.$refs.table.getSelectionRows()
      if (rows == null || rows.length == 0) {
        this.$message.warning('请选择需要编辑的用户')
        return
      }

      let userIds = []
      for (let i in rows) {
        userIds.push(rows[i].id)
      }
      this.batchEditDialog.userIds = userIds
      this.batchEditDialog.visible = true
    },
  },
}
</script>
